<template>
    <div>
        <div class="container">
        <div class="collection-header">
            <div class="headers">
                <h1>收藏</h1>
                <p>有路的地方就有凹凸陪伴</p>
            </div>
            <collec-tion></collec-tion>
        </div>

        <div class="footer">
            <ul>
                <router-link tag="li" to="/home">
                    <img src="../assets/img/下载 (8).png" alt="">
                    <p>首页</p>
                </router-link>
                <li>
                     <img src="../assets/img/下载 (7).png" alt="">
                    <p class="active"><a href="">收藏</a></p>
                </li>
                <router-link tag="li" to="/itinerary">
                     <img src="../assets/img/下载 (2).png" alt="">
                    <p>行程</p>
                </router-link>
                <router-link tag="li" to="/mi">
                     <img src="../assets/img/下载 (3).png" alt="">
                    <p>我的</p>
                </router-link>
            </ul>
        </div>
    </div>
    </div>
</template>

<script>
import CollecTion from "@/components/CollecTion"

    export default {
      data(){
        return{
        }
      },
      methods:{
       
      },

      created(){
      
      },
      
  components: { CollecTion },
    }
</script>

<style lang="scss">
* {
  padding: 0px;
  margin: 0px;
}
ul {
  list-style: none;
}
body,html {
  width: 100%;
  height: 100%;
}
a {
  text-decoration: none;
}
.container {
  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;
}
.collection-header {
  width: 100%;
  .headers {
    width: 90%;
    height: 108px;
    margin: 0 auto;
    h1 {
      padding-top: 30px;
      padding-bottom: 10px;
    }
  }
}
.content {
  width: 100%;
  margin-top: 25px;
  .contents {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 75px;
    .car {
      width: 162px;
      height: 194px;
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
      position: relative;
      img {
        width: 100%;
        height: 110px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      h4 {
        & > img {
          width: 12px;
          height: 12px;
          float: right;
          margin-top: 5px;
        }
      }
      .one {
        font-size: 10px;
        color: #3c3c5a;
        margin: 8px 0;
        img {
          width: 10px;
          height: 10px;
        }
      }
      p {
        & > span {
          color: #3c3c5a;
          font-size: 13px;
        }
      }
      .imgs {
        width: 15px;
        height: 15px;
        position: absolute;
        top: 15px;
        right: 15px;
      }
    }
  }
}
.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  ul {
    width: 100%;
    height: 65px;
    // border-top: 1px solid #c9c9d0;
    display: flex;
    justify-content: center;
    li {
      width: 94px;
      height: 100%;
      img {
        width: 35px;
        height: 35px;
        margin: 3px 30px;
      }
      p {
        text-align: center;
        font-size: 13px;
        line-height: 8px;
      }
      .active {
        a {
          color: #00cf97;
        }
      }
    }
  }
}

</style>